<template>
  <login-page>
    <transition enter-active-class="animate__animated animate__tada" appear>
      <div class="login-box ">
        <div class="flex flex-row justify-between items-center p-20 ">
          <span class=" font-bold ml-6 flex text-3xl">欢迎登录</span>
          <router-link :to="{ name: 'Regist' }" class="text-[#60a5fa] underline">去注册</router-link>
        </div>
        <el-form class="box-border p-20 mt-10 " ref="loginFormEl" :rules="customInfoRules" :model="customInfo">
          <el-form-item prop="zh">

            <el-input v-model="customInfo.zh" placeholder="请输入账号" class="el-input__inner " />
          </el-form-item>
          <el-form-item prop="admin_pwd">
            <el-input v-model="customInfo.custom_pwd" type="password" placeholder="请输入密码" show-password
              class="el-input__inner mt-10" />
          </el-form-item>
          <div class="flex flex-row mt-10">
            <el-checkbox v-model="statu" label="已阅读并同意小米帐号用户协议和隐私政策" size="large" />

          </div>
          <div class=" flex flex-row ">
            <el-button type="danger" class="mt-10 w-full h-[100px] bg-[#ff6700]  text-white font-bold"
              @click="checkBox">登陆</el-button>
          </div>
        </el-form>
      </div>
    </transition>
  </login-page>




</template>
  
<script setup>

import { useRouter } from "vue-router";

import { reactive, ref } from "vue";
import { Eleme, } from "@element-plus/icons-vue";
//导出没有加default,所以需解构
//导入API
import API from "../utils/API";
import { mainStore } from "../store";
//成功提示
import { ElNotification } from "element-plus";
//是否阅读状态
const store = mainStore();
const statu = ref(false);
const router = useRouter();
const customInfo = reactive({
  zh: "13811111111",
  custom_pwd: "123456"
});

//这里就是验证规则
const customInfoRules = {
  zh: [
    { required: true, message: "请输入账号", trigger: "blur" }
  ],
  custom_pwd: [
    { required: true, message: "请输入密码", trigger: "blur" }
  ]
}
const loginFormEl = ref(null);

const checkBox = () => {
  if (statu.value) {
    submitLoginForm();
  }
  else {
    ElNotification({
      title: "提示",
      message: "您没有同意已阅读小米帐号用户协议和隐私政策,请同意!",
      type: "success"
    });
  }
}
const submitLoginForm = () => {
  loginFormEl.value.validate(valid => {
    if (valid) {
      console.log("验证成功");
      checkLogin();
    }
    else {
      console.log("验证失败");
    }
  });
}
const isLoading = ref(false);
const checkLogin = () => {
  isLoading.value = true;
  API.customInfo.checkLogin(customInfo).then((result) => {

    console.log(result.loginClientInfo);
    // store.setToken(result.token);
    store.setToken(result.token);
    store.setLoginClientInfo(result.loginClientInfo);

    ElNotification({
      title: "提示",
      message: "登陆成功",
      type: "success"
    });
    router.replace({ name: 'DataView' });

  }).catch((error) => {
    console.log(error);


  }).finally(() => {
    isLoading.value = false;
  })
}


</script>
  
<style scoped lang="scss">
.login-box {
  @apply w-[550px] py-[60px];
  box-shadow: 0 0 25px 10px gray;
}

.right-bar-item {
  >.title-text {
    li:hover {
      @apply text-red-500;
    }
  }
}

.el-input__inner {
  height: 60px !important;
}
</style>